<template>
  <div class="post-detail">
    <div class="post-box">
      <div class="title">{{ title }}</div>
      <div v-html="content" />
    </div>

  </div>
</template>
<script lang="ts">
import { getPost, PostData } from '@/api/post'
import { defineComponent, onMounted, ref } from 'vue'
import { useRoute } from 'vue-router'
export default defineComponent({

  setup() {
    const router = useRoute()
    const postList = ref<PostData[]>([])
    const title = ref('')
    const content = ref('')
    const getList = function () {
      getPost({
        id: Number(router.query.id),
        pageNum: 1,
        pageSize: 10
      }).then(res => {
        title.value = res.data.posts[0].title
        content.value = res.data.posts[0].content
      })
    }
    onMounted(() => {
      getList()
    })
    return {
      postList,
      content,
      title
    }
  }
})
</script>

<style lang="scss" scoped>
.post-detail{
  min-height: 100vh;
  padding:20px 60px;
  .post-box{
    padding:40px 60px;
    background: rgb(255, 255, 255,0.2);
    min-height:60vh;
  }
  .title{
    font-size:20px;
    text-align: center;
    margin-bottom:20px;
    color:rgb(6, 2, 24)
  }
  .content{

  }
}
</style>
